﻿@using Smartstore.Core.Content.Menus;
@using Smartstore.Web.Models.Common;

@model FooterModel

@{
    var invserseFooter = Display.GetThemeVariable<bool>("inverse-footer");
}

<footer id="footer" class="@(invserseFooter ? "footer-inverse" : "footer-light")">

    <zone name="footer_top"></zone>

    <nav sm-if="Model.ShowSocialLinks && Model.SocialLinks.Any()" class="footer-social-wrapper" aria-label="@T("Aria.Label.SocialMediaLinks")">
        <div class="container footer-social">
            <div class="row">
                <div class="col text-center">
                    <div class="d-flex flex-wrap justify-content-center">
                        @foreach (var link in Model.SocialLinks)
                        {
                            <a href="@link.Href" 
                               target="_blank" rel="noopener"
                               class="btn btn-icon rounded-circle btn-flat btn-social btn-brand-@link.CssClass" 
                               title="@link.DisplayName"
                               aria-label="@link.DisplayName">
                                <i class="fab fa-@link.CssClass" aria-hidden="true"></i>
                            </a>
                        }
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="footer-main-wrapper">
        <div class="container footer-main">
            <div class="row sm-gutters">

                <div class="col-md-4 col-lg-3">
                    <nav class="footer-links nav-collapsible" aria-labelledby="footer-info-heading">
                        <h3 id="footer-info-heading" 
                            class="footer-title nav-toggler collapsed h4" 
                            data-toggle="collapse" 
                            data-target="#footer-info" 
                            aria-controls="footer-info" 
                            aria-expanded="false" >
                            @Html.Raw(T("Footer.Info"))
                        </h3>
                        <div class="collapse nav-collapse" id="footer-info" role="region" aria-labelledby="footer-info-heading">
                            <menu name="FooterInformation" template="LinkList" />
                        </div>
                    </nav>
                </div>

                <div class="col-md-4 col-lg-3">
                    <nav class="footer-links nav-collapsible" aria-labelledby="footer-service-heading">
                        <h3 id="footer-service-heading" 
                            class="footer-title nav-toggler collapsed h4" 
                            data-toggle="collapse" 
                            data-target="#footer-service" 
                            aria-controls="footer-service" 
                            aria-expanded="false">
                            <span class="d-none d-md-block">@Html.Raw(T("Footer.Service"))</span>
                            <span class="d-md-none">@Html.Raw(T("Footer.Service.Mobile"))</span>
                        </h3>
                        <div class="collapse nav-collapse" id="footer-service" role="region" aria-labelledby="footer-service-heading">
                            <menu name="FooterService" template="LinkList" />
                        </div>
                    </nav>
                </div>

                <div class="col-md-4 col-lg-3">
                    <nav class="footer-links nav-collapsible" aria-labelledby="footer-company-heading">
                        <h3 id="footer-company-heading" 
                            class="footer-title nav-toggler collapsed h4" 
                            data-toggle="collapse" 
                            data-target="#footer-company" 
                            aria-controls="footer-company" 
                            aria-expanded="false">
                            <span class="d-none d-md-block">@Html.Raw(T("Footer.Company"))</span>
                            <span class="d-md-none">@Html.Raw(T("Footer.Company.Mobile"))</span>
                        </h3>
                        <div class="collapse nav-collapse" id="footer-company" role="region" aria-labelledby="footer-company-heading">
                            <menu name="FooterCompany" template="LinkList" />
                        </div>
                    </nav>
                </div>

                <div class="col-12 col-lg-3">
                    <zone name="footer_col_4_before"></zone>

                    <div class="row gx-md-4 gy-md-3">
                        <div sm-if="!Model.HideNewsletterBlock" class="col-12 col-md col-lg-12">
                            <form id="newsletter-form" sm-ajax method="post" asp-action="Subscribe" asp-controller="Newsletter"
                                  data-subscription-failure="@T("Newsletter.SubscriptionFailed")"
                                  aria-labelledby="newsletter-subscribe-heading">
                                <div class="footer-newsletter nav-collapsible">
                                    <h3 id="newsletter-subscribe-heading" 
                                        class="footer-title nav-toggler collapsed h4"
                                        data-toggle="collapse" 
                                        data-target="#newsletter-body"
                                        aria-controls="newsletter-body" 
                                        aria-expanded="false">
                                        @Html.Raw(T("Newsletter.Title"))
                                    </h3>
                                    <div id="newsletter-body" class="collapse nav-collapse" role="region" aria-labelledby="newsletter-subscribe-heading">
                                        <div id="newsletter-subscribe-block" class="mt-2">
                                            <div class="input-group has-icon shadow-xs rounded-pill mb-2">
                                                <input asp-for="NewsletterEmail" 
                                                       id="newsletter-email" 
                                                       type="email"
                                                       class="rounded-start-pill" 
                                                       placeholder="@T("Newsletter.Email")" 
                                                       aria-label="@T("Newsletter.Email")"
                                                       autocomplete="email" />
                                                <span class="input-group-icon text-muted" style="--inline-icon-offset: 4px">
                                                    <i class="far fa-envelope" aria-hidden="true"></i>
                                                </span>
                                                <span class="input-group-append">
                                                    <span class="input-group-inline-addon rounded-end-pill">
                                                        <button id="newsletter-subscribe-button" type="submit" class="btn btn-primary">
                                                            <span>@T("Newsletter.Button")</span>
                                                        </button>
                                                    </span>
                                                </span>
                                            </div>

                                            <fieldset class="mb-2">
                                                <legend class="sr-only">@T("Common.SelectAction")</legend>
                                                <div class="hstack">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="newsletter-subscribe" name="optionsRadios" value="newsletter-subscribe" checked="checked">
                                                        <label class="form-check-label" for="newsletter-subscribe">
                                                            <span>@T("Newsletter.Subscribe")</span>
                                                        </label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio" id="newsletter-unsubscribe" name="optionsRadios" value="newsletter-unsubscribe">
                                                        <label class="form-check-label" for="newsletter-unsubscribe">
                                                            <span>@T("Newsletter.Unsubscribe")</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </fieldset>

                                            <zone name="gdpr_consent_small"></zone>
                                            <span asp-validation-for="NewsletterEmail"></span>
                                        </div>
                                        <div id="newsletter-result-block" class="alert alert-success d-none mt-2" role="status" aria-live="polite"></div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div sm-if="Model.ShowThemeSelector" class="col-12 col-md col-lg-12">
                            <div class="theme-selector nav-collapsible">
                                <h3 id="theme-selector-heading" 
                                    class="footer-title nav-toggler collapsed h4"
                                    data-toggle="collapse" 
                                    data-target="#footer-themes" 
                                    aria-controls="footer-themes" 
                                    aria-expanded="false">
                                    @Html.Raw(T("Footer.Themes"))
                                </h3>
                                <div id="footer-themes" class="content collapse nav-collapse" role="region" aria-labelledby="theme-selector-heading">
                                    <div class="mb-3 mb-md-0">
                                        @{
                                            @await Component.InvokeAsync("StoreThemeSelector")
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <zone name="footer_col_4_after"></zone>
                </div>
            </div>
        </div>
    </div>

    <zone name="footer_bottom"></zone>

    <div class="footer-bottom-wrapper">
        <div class="container footer-bottom">
            <div class="hstack column-gap-3 row-gap-1 justify-content-between flex-wrap flex-md-nowrap">
                <div sm-if="Model.ShowLegalInfo" id="footer-legal-info">
                    @Html.Raw(Model.LegalInfo)
                </div>

                <div sm-if="Model.SmartStoreHint.HasValue()">
                    @Html.Raw(Model.SmartStoreHint)
                </div>

                <div>
                    @Html.Raw(T("Content.CopyrightNotice", DateTime.Now.Year.ToString(), Model.StoreName))
                </div>
            </div>
        </div>
    </div>
</footer>